import { useEffect } from 'react'
// useSelector 它是用于在redux中的state来获取数据
// useDispatch 它可以得到一个dispatch方法，完成对于redux任务的投递
import { useSelector, useDispatch } from 'react-redux'

const App = () => {
  const dispatch = useDispatch()
  // 得到指定的值
  let num = useSelector(state => state.count)
  let films = useSelector(state => state.films)

  const addCount = () => {
    dispatch({ type: 'addCount', data: 1 })
  }

  const getFilms = () => {
    // 它是一个异步
    dispatch({ type: 'fetchFilms', data: 1000 })
  }

  useEffect(() => {
    getFilms()
  }, [])

  return (
    <div>
      <h3>{num}</h3>
      <button onClick={addCount}>++++</button>
      <hr />
      {/* <button onClick={getFilms}>获取电影数据</button> */}
      <ul>
        {
          // 条件渲染
          films.length === 0 ? <div>玩命加载中...</div> : films.map(item => <li key={item.id}>{item.name}</li>)
        }
      </ul>
    </div>
  )
}

export default App
